import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
	state = {
		msgList:[
			{id:'001',name:'消息1',content:'你好，中国'},
			{id:'002',name:'消息2',content:'你好，北京'},
			{id:'003',name:'消息3',content:'你好，尚硅谷'},
		]
	}
	render() {
		return (
			<div>
				<ul>
					{
						this.state.msgList.map((msgObj)=>{
							return (
								<li key={msgObj.id}>
									{/* 向路由组件传递state参数 */}
									<Link 
										to={{
											pathname:'/home/message/detail',
											state:{
												id:msgObj.id,
												name:msgObj.name,
												content:msgObj.content,
											},
											peiqi:{x:1}
										}}
									>
										{msgObj.name}
									</Link>
									&nbsp;&nbsp;<button onClick={this.showMsg(msgObj,true)} >点我push查看消息</button>
									&nbsp;&nbsp;<button onClick={this.showMsg(msgObj,false)} >点我replace查看消息</button>
								</li>
							)
						})
					}
				</ul>
				<hr/>
				{/* 无需声明接收 */}
				<Route path="/home/message/detail" component={Detail}/>
				<button onClick={this.houtui}>←后退</button>
				<button onClick={this.qianjin}>前进→</button>
				<button onClick={this.testGo}>测试一下go</button>
			</div>
		)
	}

	showMsg = (msgObj,isPush)=>{
		return ()=>{
			//此处写一些代码，指挥路由跳转
			const state = {
				id:msgObj.id,
				name:msgObj.name,
				content:msgObj.content,
			}
			isPush ? this.props.history.push('/home/message/detail',state) :
			this.props.history.replace('/home/message/detail',state)
		}
	}

	houtui = ()=>{
		this.props.history.goBack()
	}

	qianjin = ()=>{
		this.props.history.goForward()
	}

	testGo = ()=>{
		this.props.history.go(2)
	}
}
